<template>
  <div id="tortureTest" style="width: 5.5rem;height: 3rem">
  </div>
</template>

<script>
export default {
  name: "tortureTest",
  mounted() {
    this.getdata();
  },
  data() {
    return {
      charts: "",
      opinionData: [],
    };
  },
  methods: {
    SetEchart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("tortureTest"));
      // let test = {"RG-IIB-N86KS-\u666e\u6559\u4e09\u4e2a\u8bfe\u5802\u89e3\u51b3\u65b9\u6848\u573a\u666f-TP": {"pass": 0, "fail": 1, "residue": 0}, "RG-IIB-N86KS-\u666e\u6559\u865a\u62df\u5316\u573a\u666f-TP": {"pass": 0, "fail": 1, "residue": 0}, "RG-IIB-N86KS-\u63a5\u53e3\u76f8\u5173-TP": {"pass": 5, "fail": 3, "residue": 1}, "RG-IIB-N86KS-\u89e6\u63a7-TP": {"pass": 0, "fail": 2, "residue": 0}, "RG-IIB-N86KS-\u5f00\u5173\u673a-TP": {"pass": 1, "fail": 1, "residue": 0}, "RG-IIB-N86KS-\u754c\u9762\u64cd\u4f5c-TP": {"pass": 3, "fail": 0, "residue": 0}}
      let test = this.opinionData
      let pass = []
      let fail = []
      let residue = []
      let all = []
      let name = []
      for(var key in test) {
        name.push(key.substring(0,6));             //属性名（key）
        pass.push(test[key]['pass'])
        fail.push(test[key]['fail'])
        residue.push(test[key]['residue'])
        all.push(test[key]['pass']+test[key]['fail']+test[key]['residue'])
        }
      // console.log(pass)
      var option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {            // Use axis to trigger tooltip
                  type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
              }
          },
          legend: {
              data: ['通过用例数', '失败用例数', '剩余用例数'],
              textStyle:{color:'#CCFFFF',fontSize:this.refontSize(14),},
              top: "10%"
          },
          grid: {
              left: '0%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'value',
              axisLine:{
                  lineStyle:{
                    color:"#CCFFFF",
                  }
                },
              axisLabel:{
              color:"#CCFFFF",
                fontSize:this.refontSize(14),
                formatter:'{value}个'
              },
              splitLine:{
              show:false
            }
          },
          yAxis: {
              type: 'category',
              data: name,
              axisLine:{
                  lineStyle:{
                    color:"#CCFFFF",
                  }
                },
              axisLabel:{
                color:"#CCFFFF",
                fontSize:this.refontSize(14),
              },
              splitLine:{
              show:false
            },
            
        },
          series: [
              {
                  name: '通过用例数',
                  type: 'bar',
                  stack: 'total',
                  // label: {
                  //     show: true
                  // },
                  itemStyle: {
                    color: '#32c5e9'
                    },
                  emphasis: {
                      focus: 'series'
                  },
                  data: pass
              },
              {
                  name: '失败用例数',
                  type: 'bar',
                  stack: 'total',
                  // label: {
                  //     show: true
                  // },
                  itemStyle: {
                    color: '#EC7063'
                    },
                  emphasis: {
                      focus: 'series'
                  },
                  data: fail
              },
              {
                  name: '剩余用例数',
                  type: 'bar',
                  stack: 'total',
                  // label: {
                  //     show: true
                  // },
                  itemStyle: {
                    color: '#CCCCCC'
                    },
                  emphasis: {
                      focus: 'series'
                  },
                  data: residue
              },
              {                               //新的一个柱子 注意不设stack
                name: '总数',       
                type: 'bar',  
                barGap: '-100%',         // 左移100%，stack不再与上面两个在一列
                label: {                 
                    normal: {
                        show: true, //显示数值
                        position: 'right',       //  位置设为right
                        formatter: '{c}',
                        textStyle: { color: '#CCFFFF' } //设置数值颜色
                    }
                },
                itemStyle: {
                    normal: {
                      color: 'rgba(128, 128, 128, 0)'    // 设置背景颜色为透明
                    }
                },
                data: all,
            }
          ]
      };
      myChart.setOption(option);
    },
    getdata(){
        this.$http({ method: 'get',
                    url: 'show/burntest/?system='+this.$route.query.project,}).then(response => {
                    // console.log(response.data);
                    this.opinionData =response.data;
                    this.SetEchart()
                },
                );
    }
  }
};
</script>

<style scoped>

</style>